<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <!-- 单页 -->
    <div class="app-page-padding" style="height:calc(100% - 50px)">
      <el-form
        ref="ruleForm"
        class="set-container"
        :rules="rules"
        :model="ruleForm"
        size="small"
        label-width="0"
      >
        <h3 class="set-title flex-start-center" style="margin-bottom:10px">
          服务费收取费率设置
          <el-button type="primary" size="mini" style="margin-left:20px" @click="rateAdd">
            添加
          </el-button>
        </h3>
        <div class="set-list">
          <div v-for="(item, index) in ruleForm.rateList" :key="index" class="item flex-start-center">
            <i class="el-icon-circle-close" style="margin-right:15px;color:#666" @click="rateDel(index)"></i>
            <el-form-item :prop="'rateList.' + index + '.startPrice'" :rules="rules.startPrice">
              <el-input v-model="item.startPrice" size="small" placeholder="请输入内容" style="width:150px"></el-input>
            </el-form-item>
            <div class="text">
              -
            </div>
            <el-form-item :prop="'rateList.' + index + '.endPrice'" :rules="rules.endPrice">
              <el-input v-model="item.endPrice" size="small" placeholder="请输入内容" style="width:150px"></el-input>
            </el-form-item>
            <div class="text">
              元
            </div>
            <el-form-item :prop="'rateList.' + index + '.rate'" :rules="rules.rate">
              <el-input v-model="item.rate" size="small" placeholder="输入费率" style="width:150px; "></el-input>
            </el-form-item>
            <div class="text">
              %
            </div>
          </div>
        </div>
      </el-form>
      <div class="app-submit-buttons" style="padding-left:116px;margin-top:10px">
        <el-row>
          <el-col :offset="1" :span="21">
            <el-button :loading="loading" type="primary" size="small" class="fa fa-check" @click="validateSubmit(ruleForm)">
              保存
            </el-button>
            <el-button size="small" class="fa fa-reply-all" @click="close">
              关闭
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { update } from '@/mock/index'

// 导入验证规则
export default {
  name: 'FormLoop',
  data () {
    return {
      rules: {
        // 事由
        date: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        // 开始价格
        startPrice: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            pattern: /^[\d]+.?[\d]*$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        // 结束价格
        endPrice: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            pattern: /^[\d]+.?[\d]*$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        // 费率
        rate: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            pattern: /^[\d]+.?[\d]*$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ]
      },
      ruleForm: {
        // 费率
        rateList: [{}]
      },
      loading: false
    }
  },
  created () {
  },
  methods: {
    // 费率添加
    rateAdd () {
      this.ruleForm.rateList.push({
      })
    },
    // 费率删除
    rateDel (index) {
      this.ruleForm.rateList.splice(index, 1)
    },
    // 关闭跳转
    close () {
      this.closeView(this.$route)
    },
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      this.loading = true
      // 编辑
      const res = await update(ruleForm)
      if (res.code === '0000') {
        this.$message({
          message: res.message,
          type: 'success'
        })
      }
      this.loading = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.set-container {
  padding: 10px 30px;

  .el-form-item {
    margin-bottom: 0;
  }
}
.set-title {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #dddddd;
  height: 50px;
}
.set-list {
  .item {
    height: 50px;
    .text {
      padding: 0 15px;
      color: #333;
    }
  }
}
</style>
